<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>巡检任务 - 管道巡检App</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            -webkit-user-select: none;
            user-select: none;
        }
        .ios-statusbar {
            height: 44px;
            background: linear-gradient(135deg, #000 0%, #333 100%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            color: white;
            font-size: 14px;
            font-weight: 600;
        }
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid #e5e7eb;
            padding: 8px 0 20px 0;
        }
    </style>
</head>
<body class="bg-gray-50 pb-20">
    <!-- iOS状态栏 -->
    <div class="ios-statusbar">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <div class="w-6 h-3 border border-white rounded-sm">
                <div class="w-4 h-1.5 bg-white rounded-sm m-0.5"></div>
            </div>
        </div>
    </div>

    <!-- 顶部导航 -->
    <div class="bg-white px-4 py-4 border-b border-gray-200">
        <div class="flex justify-between items-center">
            <button class="w-8 h-8 flex items-center justify-center">
                <i class="fas fa-arrow-left text-gray-600"></i>
            </button>
            <h1 class="text-lg font-semibold text-gray-800">巡检任务</h1>
            <button class="w-8 h-8 flex items-center justify-center">
                <i class="fas fa-filter text-gray-600"></i>
            </button>
        </div>
    </div>

    <!-- 搜索栏 -->
    <div class="bg-white px-4 py-3 border-b border-gray-100">
        <div class="relative">
            <input type="text" placeholder="搜索任务..." 
                   class="w-full pl-10 pr-4 py-3 bg-gray-100 rounded-xl border-0 focus:ring-2 focus:ring-blue-500">
            <i class="fas fa-search absolute left-3 top-4 text-gray-400"></i>
        </div>
    </div>

    <!-- 状态筛选 -->
    <div class="bg-white px-4 py-4">
        <div class="flex space-x-3 overflow-x-auto">
            <button class="bg-blue-500 text-white px-4 py-2 rounded-full text-sm whitespace-nowrap">
                全部任务 (15)
            </button>
            <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-full text-sm whitespace-nowrap">
                待执行 (5)
            </button>
            <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-full text-sm whitespace-nowrap">
                进行中 (3)
            </button>
            <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-full text-sm whitespace-nowrap">
                已完成 (7)
            </button>
        </div>
    </div>

    <!-- 任务列表 -->
    <div class="px-4 py-4 space-y-4">
        <!-- 进行中任务 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm border border-blue-200">
            <div class="flex justify-between items-start mb-3">
                <div class="flex items-center space-x-2">
                    <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">进行中</span>
                    <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded-full">优先</span>
                </div>
                <button class="text-gray-400">
                    <i class="fas fa-ellipsis-v"></i>
                </button>
            </div>
            
            <h3 class="font-semibold text-gray-800 mb-2">A-001段管道巡检</h3>
            <p class="text-sm text-gray-600 mb-3">巡检里程桩001-015，检查管道状态、周围环境变化</p>
            
            <div class="grid grid-cols-2 gap-4 mb-4">
                <div class="text-center p-3 bg-gray-50 rounded-xl">
                    <div class="text-lg font-semibold text-gray-800">8/15</div>
                    <div class="text-xs text-gray-500">完成进度</div>
                </div>
                <div class="text-center p-3 bg-gray-50 rounded-xl">
                    <div class="text-lg font-semibold text-gray-800">156m</div>
                    <div class="text-xs text-gray-500">当前位置</div>
                </div>
            </div>
            
            <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-clock"></i>
                    <span>09:00 - 17:00</span>
                </div>
                <div class="flex items-center space-x-2">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>石化园区A区</span>
                </div>
            </div>
            
            <div class="flex space-x-3">
                <button class="flex-1 bg-blue-500 text-white py-3 rounded-xl font-medium">
                    <i class="fas fa-play mr-2"></i>继续巡检
                </button>
                <button class="px-4 py-3 bg-gray-100 text-gray-700 rounded-xl">
                    <i class="fas fa-pause"></i>
                </button>
            </div>
        </div>

        <!-- 待执行任务 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm">
            <div class="flex justify-between items-start mb-3">
                <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">待执行</span>
                <button class="text-gray-400">
                    <i class="fas fa-ellipsis-v"></i>
                </button>
            </div>
            
            <h3 class="font-semibold text-gray-800 mb-2">B-002段管道巡检</h3>
            <p class="text-sm text-gray-600 mb-3">巡检里程桩001-008，重点检查腐蚀防护情况</p>
            
            <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-calendar"></i>
                    <span>明天 08:30</span>
                </div>
                <div class="flex items-center space-x-2">
                    <i class="fas fa-route"></i>
                    <span>2.3km</span>
                </div>
            </div>
            
            <button class="w-full bg-gray-100 text-gray-700 py-3 rounded-xl font-medium">
                <i class="fas fa-clock mr-2"></i>等待开始时间
            </button>
        </div>

        <!-- 已完成任务 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm">
            <div class="flex justify-between items-start mb-3">
                <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">已完成</span>
                <button class="text-gray-400">
                    <i class="fas fa-ellipsis-v"></i>
                </button>
            </div>
            
            <h3 class="font-semibold text-gray-800 mb-2">C-003段管道巡检</h3>
            <p class="text-sm text-gray-600 mb-3">巡检里程桩001-012，发现1处一般缺陷</p>
            
            <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-check-circle text-green-500"></i>
                    <span>昨天 16:45 完成</span>
                </div>
                <div class="flex items-center space-x-2">
                    <i class="fas fa-exclamation-triangle text-orange-500"></i>
                    <span>1个缺陷</span>
                </div>
            </div>
            
            <div class="flex space-x-3">
                <button class="flex-1 bg-blue-100 text-blue-700 py-3 rounded-xl font-medium">
                    <i class="fas fa-eye mr-2"></i>查看报告
                </button>
                <button class="px-4 py-3 bg-gray-100 text-gray-700 rounded-xl">
                    <i class="fas fa-share"></i>
                </button>
            </div>
        </div>

        <!-- 紧急任务 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm border border-red-200">
            <div class="flex justify-between items-start mb-3">
                <div class="flex items-center space-x-2">
                    <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">紧急</span>
                    <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">待执行</span>
                </div>
                <button class="text-gray-400">
                    <i class="fas fa-ellipsis-v"></i>
                </button>
            </div>
            
            <h3 class="font-semibold text-gray-800 mb-2">D-004段紧急巡检</h3>
            <p class="text-sm text-gray-600 mb-3">接到报告疑似泄漏，需立即前往检查</p>
            
            <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-clock text-red-500"></i>
                    <span>立即执行</span>
                </div>
                <div class="flex items-center space-x-2">
                    <i class="fas fa-exclamation-triangle text-red-500"></i>
                    <span>高风险</span>
                </div>
            </div>
            
            <button class="w-full bg-red-500 text-white py-3 rounded-xl font-medium">
                <i class="fas fa-bolt mr-2"></i>立即前往
            </button>
        </div>
    </div>

    <!-- 底部标签栏 -->
    <div class="tab-bar">
        <div class="grid grid-cols-4 gap-1">
            <button class="flex flex-col items-center py-2 text-gray-400">
                <i class="fas fa-home text-lg mb-1"></i>
                <span class="text-xs">首页</span>
            </button>
            <button class="flex flex-col items-center py-2 text-blue-600">
                <i class="fas fa-clipboard-list text-lg mb-1"></i>
                <span class="text-xs">任务</span>
            </button>
            <button class="flex flex-col items-center py-2 text-gray-400">
                <i class="fas fa-camera text-lg mb-1"></i>
                <span class="text-xs">上报</span>
            </button>
            <button class="flex flex-col items-center py-2 text-gray-400">
                <i class="fas fa-user text-lg mb-1"></i>
                <span class="text-xs">我的</span>
            </button>
        </div>
    </div>
</body>
</html>